<template>
    <div class="container">
      <div class="coupon">
        <div class="coupon-left" :style="{ background: backgroundColor }">
          <div class="price">{{ title }}</div>
          <div class="title">{{ subTitle }}</div>
          <div class="status">{{ status }}</div>
        </div>
        <div class="coupon-right">
          <form @submit.prevent="onSubmit">
            <div class="form-group">
              <label for="username">Username:</label>
              <input
                type="text"
                id="username"
                v-model="username"
                required
              />
            </div>
            <div class="form-group">
              <label for="password">Password:</label>
              <input
                type="password"
                id="password"
                v-model="password"
                required
              />
            </div>
            <div class="form-group">
              <input type="checkbox" v-model="remember" />
              <label for="remember">Remember me</label>
            </div>
            <div class="form-group">
              <button type="submit">Login</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
//   import md5 from "blueimp-md5";
  
  export default {
    data() {
      return {
        username: "",
        password: "",
        remember: false,
        title: "Login",
        subTitle: "Please enter your username and password",
        status: "",
        backgroundColor: "rgb(239, 211, 211)"
      };
    },
    methods: {
      onSubmit() {
        if (this.username && this.password) {
          const encrypted = this.password;
          if (encrypted === "d5f5e5f5b5e5b5f5b5e5b5f5e5d5f5e5") {
            this.status = "Login success";
            this.backgroundColor = "rgb(211, 239, 211)";
            this.title = "Welcome";
            this.subTitle = this.username;
          } else {
            this.status = "Login failed";
            this.backgroundColor = "rgb(239, 211, 211)";
          }
        }
      }
    }
  };
  </script>
  
  <style>
  